
  
  
  
<template>
    <div style="padding:20px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Client/Home' }">站点</el-breadcrumb-item>
            <el-breadcrumb-item>非遗话题</el-breadcrumb-item>
        </el-breadcrumb>
        <div v-if="detail == null">
            <el-skeleton :rows="20" animated />
        </div>
        <div v-else style="padding:0px 300px">
            <div style="display: flex;flex-direction: row;border-radius: 10px;border: 1px solid gray;">
                <el-auto-swiper style="flex:1;margin-top:10px" :BindImageUrls="detail.ImageUrls"></el-auto-swiper>
                <!-- <el-carousel style="flex:1;width:600px;"
                    :style="{ 'height': detail.ImageUrlsArray[activeIndex].autoH + 'px' }" indicator-position="none"
                    @change="swipperChange">
                    <el-carousel-item :style="{ 'width': '600px', 'height': item.autoH + 'px' }"
                        v-for="(item, index) in detail.ImageUrlsArray" :key="index">
                        <el-image :style="{ 'width': '600px', 'height': item.autoH + 'px' }" :src="item.url"
                            fit="cover"></el-image>
                    </el-carousel-item>
                </el-carousel> -->
                <div style="flex:1;padding:10px;">
                    <div style="display: flex; align-items: center;" v-if="detail.CreatorAppUserDto != null">
                        <el-image :src="detail.CreatorAppUserDto.ImageUrls" style="width:50px;height: 50px;">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline" style="font-size: 50px;"></i>
                            </div>
                        </el-image>
                        <span style="padding-left:20px;font-size: 25px;">{{
                            detail.CreatorAppUserDto.Name }}</span>
                    </div>
                    <div style="font-weight: bold;font-size: 25px;margin-top:10px">{{ detail.Title }}</div>
                    <div style="margin-top:20px;display: flex;flex-direction: row-reverse;">
                        <span>{{ detail.CreationTime }}</span>
                        <span style="padding-right:20px;"> 浏览量:{{ detail.ViewCount }}</span>
                    </div>


                    <div style="min-height:300px;letter-spacing: 5px;" v-html="detail.Content"></div>
                    <el-divider></el-divider>

                    <el-input type="textarea" :rows="4" placeholder="请文明发文" v-model="CommentContent">
                    </el-input>
                    <el-button style="margin-top:10px" type="primary" :disabled="CommentContent == ''"
                        @click="SendContent">发 送</el-button>

                    <div style="color:#B9843F;font-size: 20px;margin-top:10px">共 {{ TotalCount }} 条评论</div>
                    <div class="comment">
                        <div class="comment-list"></div>

                    </div>
                    <div v-for="(item, index) in CommentList">
                        <div style="display: flex;margin-top:10px">
                            <div>
                                <el-image :src="item.CreatorAppUserDto.ImageUrls" style="width:60px;height: 60px;">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline" style="font-size: 50px;"></i>
                                    </div>
                                </el-image>
                            </div>
                            <div>
                                <div style="font-size: 20px;">{{ item.CreatorAppUserDto.Name }}</div>
                                <div style="margin-top:10px"><span>{{ item.Content }}</span> </div>
                                <div style="margin-top:10px;color:#B9843F">{{ item.CreationTime }}
                                    <span style="float: right;color:red" v-if="item.CreatorId == userId"
                                        @click="DeleteComment(item.Id)">删 除</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


        </div>


    </div>
</template>
  
<script>
import router from '@/router';
import { mapGetters } from 'vuex'
export default {
    name: 'Topic',
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'userId', 'loginTimePeriod', "user"
        ])
    },

    data() {
        let now = this.$moment().format('YYYY-MM-DD');
        return {
            now: now,
            where: {
                IsPutaway: true,
            },
            detail: null,
            ImageArrays: [{

                title: '测试1',

                type: 'video/mp4',

                href: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',

                poster: 'https://vdposter.bdstatic.com/ce7f68826b2a6fa0b7fe63057e70d7f3.jpeg?x-bce-process=image/resize,m_fill,w_352,h_234/format,f_jpg/quality,Q_100'

            },

            {

                title: '测试2',

                type: 'video/mp4',

                href: 'http://vjs.zencdn.net/v/oceans.mp4',

                poster: 'https://img-blog.csdnimg.cn/20190301125255914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAxMDE5OA==,size_16,color_FFFFFF,t_70'

            }],
            activeIndex: 0,
            TotalCount: 0,
            CommentList: [],
            CommentContent: ""
        };
    },
    mounted() {
        this.GetDetail();
        this.GetCommentApi();

    },
    methods: {
        swipperChange(e) {
            this.activeIndex = e;
        },
        async GetDetail() {
            let { Data } = await this.$Post(`/Topic/Get`, { Id: this.$route.query.TopicId });


            setTimeout(() => {
                this.detail = Data;

            }, 1000);

        },
        async GetCommentApi() {
            let { Data: { Items, TotalCount } } = await this.$Post(`/Comment/List`, { TopicId: this.$route.query.TopicId });
            this.TotalCount = TotalCount;
            this.CommentList = Items;
        },
        async SendContent() {
            if (this.$comm.CheckIsLogin()) {
                let { Data } = await this.$Post(`/Comment/Get`, {});
                Data.Content = this.CommentContent;
                Data.TopicId = this.$route.query.TopicId;
                Data.NickName = this.name;
                Data.HeadImage = this.avatar;
                var { Success } = await this.$PostLoading(`/Comment/CreateOrEdit`, Data);
                this.CommentContent = "";
                this.$message.success("发表成功")
                this.GetCommentApi();
            }
        },
        async DeleteComment(Id) {
            await this.$PostDelete(`/Comment/Delete`, { Id: Id });
            this.GetCommentApi();
        },
        Select(item) {
            this.$comm.CheckIsLogin()
            if (item.IsLoseEfficacy == true) {
                return;
            }
            if (item.RemindQty == 0) {
                return;
            }

            if (item.AppointRecordDtos.some(x => x.CreatorId == this.userId)) {
                this.$message.error("你已经预约过了");
                return;
            }
            this.$router.push({
                path: `/Client/AppointInfoToOrder`, query: {
                    AppointInfoSettingsId: item.Id,
                    AppointInfoId: item.AppointInfoId,
                }
            });

        },
        Look(item) {
            this.appointList = item.AppointRecordDtos;
            this.showAppoint = true;

        }
    }


}
</script>
  
<style lang="scss" scoped></style>
  
  
  
 
 
 
  
  
